import { Dropdown } from 'antd'; //从 antd 库中导入 Dropdown 组件，antd 是 Ant Design 组件库，Dropdown 是一个下拉菜单组件
import { createStyles } from 'antd-style'; //从 antd-style 库中导入 createStyles 函数，该函数用于创建样式。
import type { DropDownProps } from 'antd/es/dropdown'; //导入 antd 中 Dropdown 组件的属性类型定义，使用 type 关键字表明这是一个类型导入，仅在 TypeScript 编译时起作用。
import classNames from 'classnames'; //入 classnames 库，它可以方便地合并多个类名
import React from 'react';

// 创建样式
const useStyles = createStyles(({ token }) => {
  return {
    dropdown: {
      [`@media screen and (max-width: ${token.screenXS}px)`]: {
        width: '100%',
      },
    },
  };
});

// 定义组件属性类型
export type HeaderDropdownProps = {
  overlayClassName?: string;
  placement?:
    | 'bottomLeft'
    | 'bottomRight'
    | 'topLeft'
    | 'topCenter'
    | 'topRight'
    | 'bottomCenter';
} & Omit<DropDownProps, 'overlay'>; // Omit 是 TypeScript 中的一个类型工具，用于从某个类型中排除某些属性。从 DropDownProps 中排除 overlay 属性，然后将剩余的属性合并到 HeaderDropdownProps 中。
/**
 * HeaderDropdown 组件是一个封装了 antd Dropdown 组件的自定义组件。
 * 它接受 overlayClassName 和 placement 作为额外的属性。
 *
 * @example
 * ```tsx
 * <HeaderDropdown overlayClassName="custom-dropdown" placement="bottomRight">
 *   <a onClick={e => e.preventDefault()}>
 *     Hover me <DownOutlined />
 *   </a>
 * </HeaderDropdown>
 * ```
 */
const HeaderDropdown: React.FC<HeaderDropdownProps> = ({
  overlayClassName: cls,
  ...restProps
}) => {
  //解构组件的属性，将 overlayClassName 重命名为 cls，并将剩余的属性收集到 restProps 中
  const { styles } = useStyles();
  return (
    <Dropdown
      overlayClassName={classNames(styles.dropdown, cls)}
      {...restProps}
    />
  ); // 返回一个 Dropdown 组件，使用 classNames 函数合并 styles.dropdown 和 cls 作为 overlayClassName，并将 restProps 传递给 Dropdown 组件
};

export default HeaderDropdown;
